<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <XiaoDog3 :title="item.dogName" :url="item.dogImgUrl" @syx="changFn"></XiaoDog3>
    </div>
    <span >你喜欢的狗如下: </span>
        <ul >
            <li v-for="(item,index) in arr" :key="index">{{ item }}</li>
        </ul>
    
  </div>
</template>

<script>
import XiaoDog3 from "./components/xiao-dog3.vue";
export default {
  components: {
    XiaoDog3,
  },
  data() {
    return {
      list: [
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=2083711142,133299928&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
          dogName: "博美",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=2083711142,133299928&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
          dogName: "泰迪",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=2083711142,133299928&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
          dogName: "金毛",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=2083711142,133299928&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
          dogName: "哈士奇",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=2083711142,133299928&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=2083711142,133299928&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
          dogName: "萨摩耶",
        },
      ],
      arr:[]
    };
  },
  methods:{
    changFn(title){
      if(this.arr.indexOf(title) !== -1) return
      this.arr.push(title)

    }
  }
};
</script>

<style>
 li{
  list-style: none;
 }
</style>